<template>
    <div>
        <div class="t-main">
<!--            <div v-if="projectSub.length > 0">-->
<!--                <p>剩余数</p>-->
<!--                <div class="surplus">-->
<!--                    <span v-for="(sub, index) in projectSub" :key="'sub-'+index">-->
<!--                        {{sub.clinic_project_name}}：<strong>{{sub.remain_num}}</strong>-->
<!--                    </span>-->
<!--                </div>-->
<!--                <Divider />-->
<!--            </div>-->
            <div class="ivu-text-center" v-if="empty">
                暂无治疗记录
            </div>
            <div v-else>
                <div class="surplus ivu-pt-8">
                    <Row :gutter="16">
                        <i-Col v-for="item in listTotal" :key="item.clinic_project_id" span="4">{{ item.clinic_project_name }} <span>正常：<b>{{ item.total_num }}</b> 援助：<b class="assinstance">{{ item.help_num }}</b></span></i-Col>
                    </Row>
                </div>
                <div class="sky-screen ivu-mb-16">
                    <row type="flex" justify="start" >
                        <Col span="4">
                            <DatePicker clearable type="date" v-model="ruleForm.time" placeholder="治疗日期" @on-change="selectOption"></DatePicker>
                        </Col>
                        <Col span="4">
                            <Select clearable v-model="ruleForm.part" placeholder="请选择" @on-change="selectOption">
                                <Option v-for="item in listTotal" :key="item.clinic_project_id" :value="item.clinic_project_id">{{ item.clinic_project_name }}</Option>
                            </Select>
                        </Col>
                    </row>
                </div>
                <Table :columns="columns" :data="data" size="small">
                    <template slot-scope="{ row, index }" slot="type">
                        {{ String(row.type) === '1' ? '治疗' : ( String(row.type) === '2' ? '新增' : String(row.type) === '3' ? '退费' : '' ) }}
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <a v-if="String(row.type) === '1'" @click="getShowDetail(row)">详细</a>
                    </template>
                </Table>
                <div class="ivu-mt ivu-text-center">
                    <Page
                        :total="total"
                        :current.sync="page"
                        show-total
                        show-elevator
                        :page-size="pageSize"
                        @on-change="changePage"
                        :page-size-opts="pageOpts"
                        show-sizer
                        transfer
                        @on-page-size-change="changePageSize"
                    />
                </div>
            </div>
<!--            <Timeline class="main-height">-->
<!--                <TimelineItem v-for="(items, index) in data" :key="'list'+index">-->
<!--                    <p class="time">{{items.created_at_str}}</p>-->
<!--                    <p class="content"><Tag>{{items.clinic_project_name}}</Tag></p>-->
<!--                    <p>-->
<!--                        <span class="c-inr-right">本次治疗:<strong>{{items.clinic_num}}</strong></span>-->
<!--                        <span v-if="items.type === '1'">本次剩余:<strong>{{items.total_num}}</strong> </span>-->
<!--                    </p>-->
<!--                    <p class="consultant">-->
<!--                        <span class="c-inr-right" v-if="items.profession_name && items.type === '1'">{{items.profession_name}}</span>-->
<!--                        <span class="c-inr-right" v-if="items.operate_name && items.type === '1'">{{items.operate_name}}</span>-->
<!--                        <Badge class="c-inr-right" status="processing" :text="items.type|handleType" />-->
<!--                        <strong v-if="items.type === '1'"><a @click="getShowDetail(items)">详细</a></strong>-->
<!--                    </p>-->
<!--                </TimelineItem>-->
<!--            </Timeline>-->
        </div>
        <Modal v-model="modal" title="治疗详细" class="clearCancle">
            <div class="t-main">
                <p class="time">{{detailItem.recently_clinic_time_str}}</p>
                <div>
                    <Table v-if="detailItem.template === 1||detailItem.template === 6" :loading="loading" border :columns="columns1" :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/mj' }}
                        </template>
                    </Table>
                    <Table v-else-if="detailItem.template === 2" :loading="loading" border :columns="columns2" :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/mj' }}
                        </template>
                    </Table>
                    <Table v-else-if="detailItem.template === 3" :loading="loading" border :columns="columns3" :data="treatmentData" size="small"></Table>
                    <Table v-else-if="detailItem.template === 4" :loading="loading" border :columns="columns4" :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/ms' }}
                        </template>
                    </Table>
                    <Table v-else-if="detailItem.template === 5" :loading="loading" border :columns="columns5" :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/min' }}
                        </template>
                    </Table>
                </div>
                <p class="ivu-m-16">
                    <span style="margin-right: 5px">本次治疗:<strong>{{detailItem.clinic_num}}</strong> </span>
                    <span>本次剩余:<strong>{{detailItem.total_num}}</strong> </span>
                </p>
                <p v-if="detailItem.template === 1 ||detailItem.template === 6" class="ivu-m-16">
                    <span>备注：{{detailItem.remark}}</span>
                </p>
                <p class="ivu-m-16 sign-area">
                    <span class="sign-label">患者签名:</span>
                    <strong class="sign-img">
                        <img :src="detailItem.patient_signature || ''" alt="">
                    </strong>
                </p>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { PatientTreatmentList, PatientTreatmentInfo } from '@api/patient'
    import { GetDetailNow } from '@api/treatment'
    import dayjs from 'dayjs'
    import mixins from '@/utils/mixins'
    export default {
        name: 'Treatment',
        mixins: [mixins],
        data () {
            return {
                loading: false,
                pageSize: 10,
                pageOpts: [10, 20, 30, 50],
                modal: false,
                deImg: require('@/assets/images/de.jpg'),
                errorImg: require('@/assets/images/error.jpg'),
                data: [],
                columns1: [
                    {
                        title: '大部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '细节部位',
                        align: 'center',
                        key: 'body_parts_small_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    },
                    {
                        title: '数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns2: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '剂量',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns3: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns4: [
                    {
                        title: '执行部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns5: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '执行时长/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                treatmentData: [],
                projectSub: [],
                itemData: {},
                empty: false,
                detailItem: {},
                columns: [
                    {
                        title: '治疗项目',
                        minWidth: 109,
                        key: 'clinic_project_name'
                    },
                    {
                        title: '数量',
                        minWidth: 109,
                        key: 'clinic_num'
                    },
                    {
                        title: '治疗时间',
                        minWidth: 109,
                        key: 'recently_clinic_time_str'
                    },
                    {
                        title: '正常剩余',
                        minWidth: 109,
                        key: 'total_num'
                    },
                    {
                        title: '援助剩余',
                        minWidth: 109,
                        key: 'help_num'
                    },
                    {
                        title: '操作人',
                        minWidth: 109,
                        key: 'operate_name'
                    },
                    {
                        title: '类型',
                        minWidth: 109,
                        slot: 'type'
                    },
                    {
                        title: '操作',
                        minWidth: 70,
                        slot: 'action'
                    }
                ],
                id: '',
                listTotal: [],
                ruleForm: {
                    time: '',
                    part: ''
                }
            }
        },
        methods: {
            imgError (item) {
                item.patient_signature = this.errorImg;
            },
            handleDetial () {
                this.modal = true;
            },
            getData (id) {
                this.id = id
                this.onLoad()
                this.getListDetail()
            },
            getListDetail () {
                GetDetailNow({ patient_card_id: this.id }).then(res => {
                    this.listTotal = res || []
                })
            },
            onLoad () {
                const params = {
                    patient_card_id: this.id,
                    page: this.page,
                    pageSize: this.pageSize,
                    clinic_date: this.ruleForm.time ? dayjs(this.ruleForm.time).format('YYYY-MM-DD') : '',
                    clinic_project_id: this.ruleForm.part
                }
                PatientTreatmentList(params).then((res) => {
                    if (res.list && res.list.length > 0) {
                        this.total = res.total
                        this.data = res.list
                        this.empty = false
                    } else {
                        this.empty = true
                    }
                    this.projectSub = res.clinic_project_list || []
                })
            },
            getShowDetail (items) {
                this.detailItem = {};
                this.getTreatmentDetail(items.id)
                this.modal = true;
            },
            getTreatmentDetail (id) {
                this.loading = true
                PatientTreatmentInfo({ id }).then((res) => {
                    this.detailItem = res
                    if (res.deteail_list) {
                        this.treatmentData = res.deteail_list
                    }
                }).finally(() => {
                    this.$nextTick(() => {
                        this.loading = false
                    })
                })
            },
            // 筛选条件查询
            selectOption () {
                this.onLoad()
            }
        },
        filters: {
            handleType (val) {
                let reVal = '';
                if (val === '1') {
                    reVal = '治疗';
                } else if (val === '2') {
                    reVal = '购买(新增)'
                }
                return reVal
            }
        }
    }
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr-right{
    margin-right: 10px;
}
.surplus {
    color: #777;
    margin-bottom: 12px;
}
.surplus strong {
    font-size: 16px;
    margin-right: 10px;
    color: #666;
}
.t-main p {
    color: #666;
    margin-bottom: 8px;
}

.sign-area {
    position: relative;
}
.sign-area .sign-label{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.sign-area .sign-img {
    margin-left: 80px;
}
.sign-area .sign-img img{
    max-width: 200px;
}
.main-height {
    height: 380px;
    max-height: 380px;
    overflow-y: auto;
}
.surplus span b {
    font-weight: bold;
    font-size:14px;
    margin-right:4px;
    color:#19be6b;
}
.surplus span b.assinstance {
    color:#ff9900;
}
</style>
